<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>欢迎使用员工管理系统</title>
	<link rel="stylesheet" href="./common/element/element.css">
	<link rel="stylesheet" href="./common/css/index.css">
</head>

<body>
	<div id="app" class="login-container">
		<div class="login-left">
			<img src="./common/images/login_img.png">
		</div>
		<div class="login-box">
			<div class="avatar-box">
				<img src="./common/images/login_logo.png">
			</div>
			<div class="title">
				员工管理系统
			</div>
			<el-form class="login-form" :model="loginAdmin" :rules="loginRules" ref="loginRef">
				<el-form-item prop="username">
					<el-input placeholder="请输入用户名" v-model="loginAdmin.username" prefix-icon="el-icon-user"></el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input placeholder="请输入密码" v-model="loginAdmin.password" prefix-icon="el-icon-lock"
						show-password>
					</el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" class="login-btn" @click="toLogin">登录</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>

	<script src="./common/js/vue.js"></script>
	<script src="./common/js/axios.min.js"></script>
	<script src="./common/element/element.js"></script>

	<script type="text/javascript">
		const vue = new Vue({
			el: '#app',
			data: {
				loginAdmin: {
					username: '',
					password: ''
				},
				loginRules: {
					username: [
						{ required: true, message: '请输入用户名', trigger: 'blur' }
					],
					password: [
						{ required: true, message: '请输入密码', trigger: 'blur' },
						{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
					],
				}
			},
			methods: {
				toLogin() {
					// 判断表单是否校验通过
					this.$refs.loginRef.validate(async valid => {
						if(!valid){
							return
						}

						// 发送登录请求
						var { data: res } = await axios.post('http://localhost:8080/login', this.loginAdmin)
	
						// 判断是否登录
						if (res.status != 200) {
							return this.$message.error(res.msg)
						}
	
						// 将用户信息存储在localStorage
						localStorage.setItem('userInfo', JSON.stringify(res.data))
	
						// 页面跳转
						location.href = 'main.html'
					})

				}
			},
		})
	</script>
</body>

</html>